<template>
  <div class="container">
    <header class="menu"></header>
    <aside class="left-aside">
      <aside-list :asideList="asideList" :asideActive="asideActive" @handleClickLi="handleClickLi">
      </aside-list>
    </aside>
    <section class="right-content">
      <router-view></router-view>
    </section>
  </div>
</template>

<script lang="ts">
import { defineComponent, reactive, toRefs } from 'vue'
import { useRouter } from 'vue-router'

import { AsideList } from '@/components/fileManage'
import { windowResize } from '@/util'
import { useFileManage } from '@/hooks/fileManage'

export default defineComponent({
  name: 'FileManage',
  components: { AsideList },
  setup() {
    windowResize()
    const data = reactive({
      asideActive: 0,
      asideList: []
    })
    const router = useRouter()
    const { getAsideList, useHandleClickLi } = useFileManage()

    // 获取左侧路由列表
    getAsideList(data)

    const methods = {
      // 点击路径跳转
      handleClickLi: (path: string, index: number) => useHandleClickLi(path, index, data, router)
    }

    return {
      ...toRefs(data),
      ...methods
    }
  }
})
</script>

<style lang="stylus" scoped>
_h-w-bgc(h,w,bgc)
  height h
  width w
  background-color bgc

.container
  min-width 800px

header
  _h-w-bgc(9vh, 100%, #f90)
  box-shadow -1px -1px 10px #292128

aside
  float left
  _h-w-bgc(91vh, 18%, #EBEBEB)
  border-top 3px solid #FFF0F5
  border-right 3px solid #F0F8FF
  border-radius 0 20px 0 0
  user-select none

section
  float left
  height 91vh
  width 82%
</style>
